<template>
  <div ref="gantt" class="left-container"></div>
</template>

<script>
import Pagination from "@/components/Pagination";
import { gantt } from "dhtmlx-gantt";
import "dhtmlx-gantt/codebase/dhtmlxgantt.css";
import { getMonthGanttTask } from "@/api/produce/schedulePlan/ProduceOrderProductPlanApi";
import moment from "moment";

export default {
  components: {
    Pagination
  },
  data() {
    return {
      tasks: {
        //for test
        data: [
          {
            id: 1,
            calendar_id: "custom",
            text: "Task #1",
            start_date: "2021-12-17",
            duration: 3,
            progress: 0.6
          },
          {
            id: 2,
            calendar_id: "custom",
            text: "Task #2",
            start_date: "2022-01-20",
            duration: 3,
            progress: 0.4
          }
        ],
        links: [{ id: 1, source: 1, target: 2, type: "0" }]
      },
      monthSel: 0
    };
  },
  props: {
    // tasks: {
    //   type: Object,
    //   default () {
    //     return {data: [], links: []}
    //   }
    // }
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    gantt.config.xml_date = "%Y-%m-%d";
    gantt.i18n.setLocale("cn");
    gantt.plugins({
      quick_info: true,
      keyboard_navigation: true,
      undo: true,
      marker: true,
      click_drag: true,
      drag_timeline: true,
      fullscreen: true,
      tooltip: true,
      multiselect: true
    });

    gantt.config.work_time = true;
    gantt.config.min_column_width = 60;
    gantt.config.duration_unit = "day";
    gantt.config.scale_height = 20 * 3;
    gantt.config.row_height = 30;

    var weekScaleTemplate = function(date) {
      var dateToStr = gantt.date.date_to_str("%d %M");
      var weekNum = gantt.date.date_to_str("(week %W)");
      var endDate = gantt.date.add(gantt.date.add(date, 1, "week"), -1, "day");
      return dateToStr(date) + " - " + dateToStr(endDate) + " " + weekNum(date);
    };

    gantt.config.scales = [
      { unit: "month", step: 1, format: "%F, %Y" },
      { unit: "week", step: 1, format: weekScaleTemplate },
      { unit: "day", step: 1, format: "%D, %d" }
    ];

    gantt.templates.timeline_cell_class = function(task, date) {
      if (!gantt.isWorkTime(date)) return "week_end";
      return "";
    };
    gantt.addCalendar({
      id: "custom", // optional
      worktime: {
        hours: ["8:00-17:00"],
        days: [0, 1, 1, 1, 1, 1, 0]
      }
    });

    gantt.init(this.$refs.gantt);
    this.monthSel = this.$route.query.monthSel;
    //this.fetchData();
    // gantt.setWorkTime({
    //   date: new Date(2021, 12, 18),
    //   hours: false
    // });

    gantt.parse(this.tasks);
    gantt.exportToPNG()
    //gantt.render();
  },
  methods: {
    fetchData() {
      debugger;
      if (this.monthSel == null) {
        this.monthSel = moment(new Date()).format("YYYY-MM-DD");
      }
      let monthGanttDto = {
        monthSel: this.monthSel
      };
      getMonthGanttTask(monthGanttDto).then(Response => {
        this.tasks = Response.data;
        gantt.parse(this.tasks);
      });
    }
  }
};
</script>
<style>
.left-container {
  height: 600px;
}

.gantt_task_cell.week_end {
  background-color: #eff5fd;
}

.gantt_task_row.gantt_selected .gantt_task_cell.week_end {
  background-color: #5c5739;
}
</style>
